/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view class="container">
		<view class="coupon-list">
			<view class="coupon-box" v-if="couponlist.coupon.length>0" v-for="(item,index) in couponlist.coupon" :key="index">
				<view class="coupon-head" style="border-image-source:url(http://192.168.0.250:1002/template/mobile/defaultimages/coupon_a.png)">
					<view class="coupon-money">
						￥
						<text class="money">
							{{item.money}}
							</text>
					</view>
					<view class="ellipsis-2">满 {{item.condition}} 元使用</view>
					<view class="ellipsis-1">满{{item.condition}}减{{item.money}}</view>
				</view>
				<view class="coupon-body">
					<view class="range">{{item.limit_store}}</view>
					<view @tap="useCoupon" class="use-btn" :data-idx="index" :data-cid="item.coupon_list_id">
					{{couponlist.use_couponId==couponlist.coupon[index].coupon_list_id?'取消使用':'立即使用'}}
					<!-- {{item.is_get==1?'取消使用':'立即使用'}} -->
					</view>
				</view>
				<view class="use-end">限{{item.dead_time_format}}前使用</view>
			</view>

		</view>
		<view class="no-data" v-if="!couponlist.coupon.length>0">
		    <image :src="imgUrl+'cart/cart-null.png'" class="cart-image"/>
		    <view class="no-data-title">没有找到相关的数据</view>
		</view>
	</view>
</template>

<script>
	import config from "@/api/config";
	export default {
		data() {
			return {
				imgUrl:config.imgUrl,
				couponlist:"",//数据
				ind:"",//选取优惠券的下标
			};
		},
		onLoad(options){
			console.log(options)
			this.getData()
		},
		methods:{
			getData(){
				let couponlist=uni.getStorageSync("couponInfo")
				this.couponlist=couponlist;
				console.log(couponlist)
			},
			useCoupon(e){
				let index=e.currentTarget.dataset.idx;
				let coupon=this.couponlist.coupon[index];
				let cid=e.currentTarget.dataset.cid;
				// if(cid==this.couponlist.use_couponId){
				// 	console.log("清楚");
					
				// 	uni.removeStorageSync('userCoupon');
				// }else{

				// }
				
				this.ind=index;
				if(cid==this.couponlist.use_couponId){
					console.log(2)
					uni.setStorageSync("userCoupon",{
						store_id:"",
						coupon_list_id:"",
						id:"",
						name:""
					})
				}else{
					uni.setStorageSync("userCoupon",{
						store_id:coupon.store_id,
						coupon_list_id:coupon.coupon_list_id,
						id:coupon.id,
						name:coupon.name
					})
				}
				
				
				
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
/* checkcoupon.wxss */
.type-navbar{
    white-space: nowrap;
    display: flex;
    width: 100%;
    height:80rpx;
    background-color: #fff;
}
.type-box{
    width: 50%;
    box-sizing: border-box;
    font-size: 28rpx;
    line-height: 76rpx;
    padding: 0 20rpx;
    text-align: center;
    display: inline-block;
    overflow: hidden;
}
.type-navbar-item{
    border-bottom: 4rpx solid #fff;
}
.type-item-on{
    border-bottom: 4rpx solid #ff3b3b;
}
.coupon-box{
    box-sizing: border-box;
    width: 50%;
    float: left;
    padding: 50rpx 30rpx 0;
    font-size: 25rpx;
}
.coupon-head{
    background-color: #fd9064;
    color: white;
    padding: 20rpx 30rpx 5rpx;
    border-bottom:2px solid transparent;
    border-image:none 100% 0 5 repeat;
}
.coupon-money{
    font-weight: bold;
    margin-bottom: 20rpx;
}
.money{
    font-size: 40rpx;
}
.coupon-body{
    background-color: white;
    padding: 30rpx 30rpx 40rpx;
    color: #999999;
}
.use-btn{
    color: #fd9064;
    border: 2rpx #fd9064 solid;
    padding: 6rpx 35rpx;
    border-radius: 35rpx;
    width: fit-content;
    margin: 20rpx auto 0;
}
.use-end{
    padding: 25rpx 0;
    color: #999999;
    font-size: 28rpx;
}
.range{
    font-size: 24rpx;
    line-height: 24rpx;
    height: 48rpx;
}
.head-disable{
    background-color: #999999;
}
.btn-disable{
    color: #999999;
    border-color: #999999;
}

</style>
